<template lang="html">
  <div id="main">
    <div class="top">
        <el-button type="primary" @click="add">新增分类</el-button>
        <el-button type="danger" @click="del('parent')">删除分类</el-button>
    </div>
    <div class="content">
      <div class="content_left">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          accordion
          show-checkbox
          highlight-current
          empty-text="暂无数据"
          @node-click="handleNodeClick"
          @check="handleCheck"
          >
        </el-tree>
      </div>
      <div class="content-r" >
          <div class="childCla" v-show="showPage.childMain">
                <div class="childNav">
                    <el-button type="primary" :plain="childStatus.isShow==1?false:true" v-if="showPage.addChildClassfiy" @click="showWho(1)">新增子分类</el-button>
                    <el-button type="primary" :plain="childStatus.isShow==2?false:true" @click="showWho(2)">详情</el-button>
                    <el-button type="primary" :plain="childStatus.isShow==3?false:true" @click="showWho(3)">属性</el-button>
                </div>
                <keep-alive>
                    <div class="box" v-if="childStatus.isShow==1">
                        <el-form :model="addData" ref="addclassfiyRule" label-width="80px" class="demo-ruleForm" :rules="addclassfiyRule">
                            <el-form-item label="节点名称" prop="categoryName">
                                <el-input v-model="addData.categoryName" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <el-form-item label="排序">
                                <el-input v-model="addData.ordinal" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <el-form-item label="父级名称">
                                <el-input v-model="addData.parentName" readonly></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addSub(2,'addclassfiyRule')">保存</el-button>
                                <el-button @click="resetForm('addclassfiyRule')">清空</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </keep-alive>
          </div>
            <keep-alive>
                <div class="box" v-if="childStatus.isShow==2">
                    <el-form label-width="120px" class="demo-ruleForm">
                            <el-form-item label="商品名称：" >
                                <el-input v-model="attrList.categoryName" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <el-form-item label="排序：">
                                <el-input v-model="attrList.ordinal" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="商品图片：">
                                <el-upload
                                    class="upload-demo"
                                    ref="upload"
                                    :action="uploadingImg"
                                    :on-change="changeImgFile"
                                    :file-list="fileList"
                                    list-type="picture"
                                    :auto-upload="false">
                                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                </el-upload>
                            </el-form-item> -->
                            <el-form-item>
                                <el-button type="primary" @click="editSub(2,'addclassfiyRule')">修改</el-button>
                                <!-- <el-button @click="resetForm('addclassfiyRule')">清空</el-button> -->
                            </el-form-item>
                        </el-form>
                </div>
            </keep-alive>
            <keep-alive>
                <div class="attrBox" v-if="childStatus.isShow==3">
                    <div class="czMenu">
                        <el-button type="success" @click="addAttr" round>新增属性</el-button>
                        <el-button type="danger" @click="delAttr(1)" round>批量删除</el-button>
                    </div>
                    <tableVue :list="list" :state="true" v-loading="pageData.listLoading" :total="total"  @changeData="selectionVal" @sizeChange="handSize">
                            <slot>
                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button
                                        size="mini"
                                        @click="compile(scope.row)">编辑
                                        </el-button>
                                        <el-button
                                        size="mini"
                                        type="danger"
                                        class="del"
                                        @click="delAttr(2,scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </slot>
                    </tableVue>
                </div>
            </keep-alive>
      </div>
    </div>
    <!-- 新增分类弹窗 -->
    <el-dialog
        title="新增分类"
        :visible.sync="pageData.dialogVisible"
        width="30%"
        >
        <el-form label-width='80px' class="form" :model="addData" :rules="addclassfiyRule" ref="addForm">
                <el-form-item label="名称" prop="categoryName">
                    <el-input v-model="addData.categoryName" placeholder="请输入名称">
                    </el-input>           
                </el-form-item>
                 <el-form-item label="图片" >
                     <el-upload
                          class="upload-demo"
                          ref="upload"
                          :action="uploadingImg"
                          :on-change="changeImgFile"
                          :file-list="fileList"
                          list-type="picture"
                          :auto-upload="false">
                          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>        
                </el-form-item>
                 <el-form-item label="排序">
                    <el-input v-model="addData.ordinal" placeholder="请输入序号">
                    </el-input>           
                </el-form-item>
            </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="pageData.dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSub(1,'addForm')">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 新增属性弹窗 -->
    <el-dialog 
        class="addChild"
         title="新增属性"
        :visible.sync="pageData.addChild"
        width="68%"
        >
        <div class="addSearch">
            <el-input placeholder="请输入查询的内容" class="searchInput"></el-input>
            <el-button type="success">搜索</el-button>
        </div>
        <el-button type="primary" @click="addAttrSub(2)" class="addAttrBtn">批量添加</el-button>
        <keep-alive>
            <tableVue :list="addChildList" :state="true" v-loading="pageData.listLoading" :total="addTotal" @changeData="addselectionVal" @sizeChange="addhandSize" style="overflow:hidden">
                <slot>
                    <el-table-column label="属性用途" align="center">
                        <template slot-scope="scope">
                            <div>
                                 <el-checkbox v-model="scope.row['sales']">导购属性</el-checkbox>
                                <el-checkbox v-model="scope.row['other']">其他</el-checkbox>
                            </div>                          
                        </template>
                    </el-table-column>
                </slot>
                 <slot>
                    <el-table-column label="是否关键属性" align="center">
                        <template slot-scope="scope">
                             <el-select v-model="scope.row['isKeyAttr']">
                                <el-option value="Y" label="是">是</el-option>
                                <el-option value="N" label="否">否</el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </slot>
                 <slot>
                    <el-table-column label="是否必填" align="center">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row['isNeed']">
                                <el-option value="Y" label="是">是</el-option>
                                <el-option value="N" label="否">否</el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </slot>
                <slot>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="primary"
                            @click="addAttrSub(1,scope.row)">新增
                            </el-button>
                        </template>
                    </el-table-column>
                </slot>

            </tableVue>
        </keep-alive>
        
    </el-dialog>
    <!-- 属性编辑 -->
     <el-dialog 
        class="addChild"
        title="操作"
        :visible.sync="childStatus.attrEdit"
        width="30%"
        >
         <el-form label-width='120px' class="form" :model="addData" :rules="addclassfiyRule" ref="addForm">
                <el-form-item label="属性名称：" >
                    <el-input v-model="EditAttrList.attrName" readonly>
                    </el-input>           
                </el-form-item>
                 <el-form-item label="属性用途：">
                    <el-checkbox v-model="EditAttrList.dgAttr">导购属性</el-checkbox>
                    <el-checkbox v-model="EditAttrList.other">其他</el-checkbox>           
                </el-form-item>
                <el-form-item label="是否关键属性：" prop="categoryName">
                    <el-select v-model="EditAttrList.isKeyAttr">
                        <el-option value="Y" label="是">是</el-option>
                        <el-option value="N" label="否">否</el-option>
                    </el-select>          
                </el-form-item>
                 <el-form-item label="是否必填：">
                    <el-select v-model="EditAttrList.isNeed">
                        <el-option value="Y" label="是">是</el-option>
                        <el-option value="N" label="否">否</el-option>
                    </el-select>               
                </el-form-item>
                <!-- <el-form-item label="名称" prop="categoryName">
                    <el-input v-model="addData.categoryName" placeholder="请输入名称">
                    </el-input>           
                </el-form-item> -->
                 <el-form-item label="排序：">
                    <el-input v-model="EditAttrList.ordinal" placeholder="请输入序号">
                    </el-input>           
                </el-form-item>
            </el-form>
        
        <span slot="footer" class="dialog-footer">
            <el-button @click="childStatus.attrEdit = false">取 消</el-button>
            <el-button type="primary" @click="editAttr">修 改</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
      getShoptreeList,
      getattrLists,
      addShopClassify,
      attrLists,
      handleAttr,
      handleClassify,
      getClassifyDetail
  } from "@/api/shoppingCentre/shoppingCentre.js" 
  import Data from './classifyAdminData.js'
  import tableVue from '@/components/alltable.vue'
export default {
  components:{
    tableVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
      this.getShoptreelist();
      
  },
  methods : {
    getShoptreelist(){  //列表树
        getShoptreeList().then(res=>{
            if(res.data.code=="OK"){
                this.treeData = res.data.data;
            }else{
                this.$message.error(res.data.message)
            }
        })
    },
    add () {
        this.pageData.dialogVisible=true;
        this.fileList =[];
        this.addData.ordinal=''
        this.$refs['addForm']&& this.$refs['addForm'].resetFields();
    },
    addSub(type,formName){//新增 分类
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let obj ={
                categoryName:this.addData.categoryName,
                ordinal:this.addData.ordinal,
            }
            if(type==1){
                obj.parentId=0
            }else{
                obj.parentId = this.addData.parentId;
            }
             handleClassify(obj,"POST").then(res=>{
                 if(res.data.code=="OK"){
                     this.$message.success('新增成功！');
                     this.addData.categoryName ='';
                     this.getShoptreelist();

                 }else{
                     this.$message.error(res.data.message);
                 }
                this.pageData.dialogVisible=false;
             })
           
          } 
        });
       
    },
    editSub(){//修改分类
        let obj ={
            categoryName:this.attrList.categoryName,
            categoryId:this.pageData.categoryId,
            ordinal:this.attrList.ordinal,
            parentId:this.addData.parentId
        }
        handleClassify(obj,"PUT").then(res=>{
          
            if(res.data.code=="OK"){
                this.$message.success('修改成功！');
                this.getShoptreelist()
            }else{
                this.$message.error(res.data.message)
            }
        })
    },
    getClassifyDetails(){ //获取分类属性详情
        let obj ={
            categoryId:this.pageData.categoryId
        }
        getClassifyDetail(obj).then(res=>{
            if(res.data.code=="OK"){
                this.attrList.categoryName =res.data.data.categoryName;
                let arr =res.data.data.categoryPicture.split(',');
                arr.length>0&&(arr.map(res=>{
                    this.fileList.push(res)
                }))
                this.attrList.ordinal =res.data.data.ordinal;
            }else{
                this.$message.error(res.data.message)
            }
        })
    },
    del (type) {
        if(type=='parent'){
            if(this.delList==0){
                this.$message.error('请选择要删除的条目！')
                return;
            }else{
                let obj =[];
                obj = this.delList.map(res=>{
                    return res.categoryId
                })
                handleClassify(obj,"DELETE").then(res=>{
                    if(res.data.code =="OK"){
                         this.delMessage(()=>{
                            this.$message.success('删除成功！');
                            this.getShoptreelist();
                        }) 
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
                
            }
        }
    },
    compile(data){ //编辑属性
        this.childStatus.attrEdit=true;
        this.EditAttrList.attrName = data.attrName;
        this.EditAttrList.attrNameId = data.attrNameId;
        this.EditAttrList.attrPurpose = data.attrPurpose;
        this.EditAttrList.isKeyAttr = data.isKeyAttr;
        this.EditAttrList.isNeed = data.isNeed;
        this.EditAttrList.ordinal = data.ordinal;
        this.EditAttrList.goodsCategoryAttrId = data.goodsCategoryAttrId;
    },
    editAttr(){
        let obj={
            attrNameId:this.EditAttrList.attrNameId,
            attrPurpose:this.EditAttrList.attrPurpose,
            isKeyAttr:this.EditAttrList.isKeyAttr,
            isNeed:this.EditAttrList.isNeed,
            ordinal:this.EditAttrList.ordinal,
            goodsCategoryAttrId:this.EditAttrList.goodsCategoryAttrId,
            categoryId:this.pageData.categoryId,
        }
        handleAttr(obj,"PUT").then(res=>{
            if(res.data.code=="OK"){
                this.getAttrList()
                this.$message.success('修改成功！')
            }else{
                this.$message.error(res.data.message)
            }
             this.childStatus.attrEdit=false;
        })
    },
    changeImgFile(data){
        let img = new FileReader();
         img.readAsDataURL(data.raw);
         img.onload = ()=>{
            this.pagefileUrl.push({
              base64Url:img.result.split(',')[1],
              id:data.uid,
              fileOriginName : data.name,
              fileType : data.name.split('.')[1]
            });
         }

    },
    handleNodeClick (val) { // 点击树状结构获取点击的值
        this.showPage.childMain =true;
         this.pageData.categoryId = val.categoryId;
        if(val.parentId !=0){
            this.childStatus.isShow =2;
            this.getClassifyDetails();
            this.showPage.addChildClassfiy =false
            this.addData.parentId = val.parentId;
        }else{
            this.childStatus.isShow =1;
            this.$refs['addclassfiyRule']&& this.$refs['addclassfiyRule'].resetFields();
            this.showPage.addChildClassfiy =true;
            this.addData.parentId = val.categoryId;
            this.addData.parentName = val.categoryName;
        }
       
    },
    handleCheck(a,b){// 勾选树状结构获取点击的值
        this.delList=b.checkedNodes
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getAttrList(){ //获取属性列表
        let obj={
            categoryId:this.pageData.categoryId
        }
        getattrLists(obj).then(res=>{
           if(res.data.code =="OK"){
               this.total = res.data.data.total;
               this.list.tbody = res.data.data.records.map(res=>{
                //    switch (res.isKeyAttr){
                //        case "Y":
                //             res.isKeyAttr ="是";
                //             break;
                //         case "N":
                //             res.isKeyAttr ="否";
                //         default:
                //             break;
                //    }
                //     switch (res.isNeed){
                //        case "Y":
                //             res.isNeed ="是";
                //             break;
                //         case "N":
                //             res.isNeed ="否";
                //         default:
                //             break;
                //    }
                   return res;
               })
           }else{
               this.$message.error(res.data.message)
           }
        })
    },
    addAttr(){//新增属性
        if(this.pageData.categoryId){
            this.pageData.addChild =true;
             let obj={
                current:1,
                size:10
            }
            this.allAttr(obj)
        }else{
            this.$message.error('请选择要添加属性的条目！')
        }
       
    },
    addAttrSub(type,data){ //新增属性提交 /批量新增
        // console.log(data);
        if(type==1){
            let arr =[];
            data.sales&&(arr.push(data.sales));
            data.other&&(arr.push(data.other));
            let obj = {
                categoryId:this.pageData.categoryId,
                attrList:[{
                    "attrNameId":data.attrNameId,
                    "attrPurpose":arr.join(),
                    "isKeyAttr":data.isKeyAttr||"N",
                    "isNeed":data.isNeed||'N'
                }]
            };
            handleAttr(obj,"POST").then(res=>{
                if(res.data.code=="OK"){
                    this.$message.success('新增成功！');
                    this.getAttrList();
                }else{
                    this.$message.error(res.data.message)
                }
            })
        }else{
            if(this.addAttrList.length==0){
                this.$message.error('请选择要添加的条目！');
                return;
            }else{
                let obj = {
                    categoryId:this.pageData.categoryId,
                    attrList:[]
                }; 
                this.addAttrList.map(res=>{
                    let arr =[];
                        res.sales&&(arr.push(res.sales));
                        res.other&&(arr.push(res.other));
                    let a ={
                        "attrNameId":res.attrNameId,
                        "attrPurpose":arr.join(),
                        "isKeyAttr":res.isKeyAttr||"N",
                        "isNeed":res.isNeed||'N'
                    }
                    obj.attrList.push(a)
                })
                handleAttr(obj,"POST").then(res=>{
                    if(res.data.code=="OK"){
                        this.$message.success('新增成功！');
                        this.getAttrList();
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            }
        }
        
        

    },
    delAttr(type,data){ //删除关联属性
        if(type==2){
            let obj =[data.goodsCategoryAttrId]
            handleAttr(obj,"DELETE").then(res=>{
                if(res.data.code=="OK"){
                    this.delMessage(()=>{
                            this.$message.success('删除成功！');
                            this.getAttrList();
                    })
                }else{
                    this.$message.error(res.data.message)
                }
            })
        }else{
            if(this.delAttrList.length>0){
                handleAttr(this.delAttrList,"DELETE").then(res=>{
                    if(res.data.code=="OK"){
                        this.delMessage(()=>{
                            this.$message.success('删除成功！');
                            this.getAttrList();
                        })
                    }else{
                        this.$message.error(res.data.message)
                    }
                })
            }else{
                this.$message.error('请选择要删除的条目！')
            }
        }
    },
    allAttr(data){//获取所有属性
        attrLists(data).then(res=>{ 
                if(res.data.code =="OK"){ 
                    this.listLoading =false;
                    this.addTotal = res.data.data.total;
                   
                    this.addChildList.tbody = res.data.data.records.map(res=>{
                        res.sales =false;
                        res.other=false;
                        switch (res.attrEditType){
                            case "1":
                                res.attrEditType = "单选"
                                break;
                            case "2":
                                res.attrEditType ="多选"
                                break;
                            case "3":
                                res.attrEditType="输入"
                                break;
                            default:
                                break;
                        }
                        return res;
                    })
                  
                }else{
                    this.listLoading =false;
                    this.$message.error(res.data.message)
                }
            })
    },
    showWho(val){//显示哪个子模块
        this.childStatus.isShow = val;
        if(val==3){
             this.getAttrList();
        }
        if(val==2){
             this.getClassifyDetails();
        }
       
    },
    selectionVal(data){
        if(data.length>0){
            
            this.delAttrList = data.map(res=>{
                return res.goodsCategoryAttrId
            })
            // console.log(this.delAttrList)
        }
    },
    addselectionVal(val){
        this.addAttrList =val
    },
    handSize(){

    },
    addhandSize(val){ //新增数据列表翻页
        let obj ={
            current:val,
            size:10
        }
        this.allAttr(obj)
    }


  }
}
</script>

<style scoped>
#main{
    width: 100%;
    height: 100%;
    background-color:#fff;;
}
#main .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    background-color: #409EFF;
}
 .top {
   margin: 20px 0;
   padding:20px 0 0 20px;
   box-sizing: border-box;
 }
 .content {
   display: flex;
   height: 100%;
 }
 .content .content_left {
   width: 500px;
   height: 100%;
   background-color: #fff;
 }
 .content-r {
   margin-left: 20px;
   width:1000px;
 }
 .form{
     width:400px;
     margin:0 auto;
 }
 .box {
   width:500px;
   padding: 10px;
   padding-top:40px;
   background-color: #fff;
   margin-top: 10px;
   border: 1px solid #ccc;
 }
 .demo-ruleForm {
   width: 300px;
 }
 .attrBox{
     margin-top: 10px;
     border:1px solid #ccc;
     padding:10px;
 }
 .addSearch{
     margin-left:20px;
 }
 .searchInput{
     width: 220px;
 }
 .addAttrBtn{
     margin-left: 20px;
     margin-top:20px;
 }
 /* .editItem{
     display: flex;
 } */
 /* .editForm{
     margin:0 auto;
 } */
</style>
